<template>
  <div class="page adaofu-new">
    <div class="container" :style="bg">
      <div class="total">许愿池鲜花数量：{{flowerTotal}}</div>
      <div class="donate" @click="joinLuckyDraw" v-if="!isOtherPlayer">捐赠50朵鲜花</div>
      <div class="info">
        <p>店主们每天可以往许愿池中投入50朵鲜花。</p>
        <p>许愿池中每获得100万朵鲜花，</p>
        <p>阿道夫会从后台随机抽取一名用户，</p>
        <p>清空ta的天猫购物车（上限9999元）！</p>
        <p>中奖名单将于11月10日在官方微博/微信账号公布。</p>
      </div>
      <div class="main">
        <div class="main-title">
          <div class="title">香氛店动态</div>
          <div v-if="!isOtherPlayer" class="weekly" :class="{ active: seriateTime === '7'}" @click="onWeeklyClick">店铺经营周报</div>
        </div>
        <div class="main-content">
          <new-list v-for="(item, i) in flowerRecord" :key="i" :item="item"></new-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from 'comp/mixins'
import NewList from 'comp/new-list'
import { sourceDomain, apiDomain } from '@/utils/constant'

export default {
  mixins: [mixins],
  components: {
    NewList
  },
  data () {
    return {
      icons: {
        bg: `${sourceDomain}/bg5.png`,
      },
      flowerRecord: [],
      seriateTime: '0',
      playerId: '',
      isOtherPlayer: false,
      flowerTotal: ''
    }
  },
  computed: {
    bg () {
      return `background-image: url(${this.icons.bg});`
    },
  },
  mounted () {
    this.resetData()
    this.playerId = this.$root.$mp.query.playerId
    if (this.playerId) {
      this.isOtherPlayer = true
    }
    this.getFlowerRecord()
    this.getAllflower()
  },
  methods: {
    async onWeeklyClick () {
      if (this.seriateTime === '7') {
        const url = encodeURIComponent(`${apiDomain}/api/poster/report?player_id=${this.playerId}`)
        wx.navigateTo({
          url: `/pages/poster/main?posterUrl=${url}`
        })
      } else {
        wx.showModal({
          title: '温馨提示',
          content: '开店七天后即可开放周报功能',
          confirmText: '确认',
          showCancel: false,
          success: (res) => {
            if (res.confirm) {}
          }
        })
      }
    },
    async getFlowerRecord () {
      const ret = await this.$store.dispatch('getFlowerRecord', {
        page: 1,
        rows: 30,
        player_id: this.playerId
      })
      this.flowerRecord = ret.data.list
      this.seriateTime = ret.account.sigin_seriate_times || '0'
      this.playerId = ret.account.player_id

      // 动态设置标题
      if (this.isOtherPlayer) {
        const title = ret.data.player.nickname
        if (title) {
          wx.setNavigationBarTitle({
            title: `${title}的香氛店铺动态`
          })
        }
      }
    },
    /**
     * 参与抽奖
     */
    async joinLuckyDraw () {
      const ret = await this.$store.dispatch('joinLuckyDraw')
      if (ret.data) {
        wx.showModal({
          title: '提示',
          content: '捐赠成功！',
          confirmText: '确认',
          showCancel: false,
          success: (res) => {
            if (res.confirm) {
              // 更新
              this.getAllflower()
            }
          }
        })
      }
    },
    async getAllflower () {
      const ret = await this.$store.dispatch('getAllflower')
      this.flowerTotal = ret.data.flowers
    }
  }
}
</script>

<style lang="less" scoped>
.adaofu-new {
  .container {
    position: relative;
    min-height: 100%;
    min-height: 100vh;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .total {
    color: #e24040;
    font-size: 28rpx;
    position: absolute;
    top: 50%;
    right: 15rpx;
    margin-top: -575rpx;
  }
  .donate {
    width: 164rpx;
    height: 29rpx;
    color: #e24040;
    font-size: 22rpx;
    background-color: #ccddad;
    border: 3rpx solid #6c6e35;
    border-radius: 10rpx;
    line-height: 29rpx;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -217rpx;
    margin-left: -82rpx;
  }
  .info {
    color: #5a2202;
    font-size: 15rpx;
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: -150rpx;
    width: 100%;
    line-height: 20rpx;
  }
  .main {
    width: calc(100% - 268rpx);
    position: absolute;
    top: 50%;
    margin-top: -10rpx;
    margin-left: 118rpx;
    &-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        color: #2f1a0e;
        font-size: 31rpx;
        font-weight: bold;
      }
      .weekly {
        color: #fff;
        font-size: 21rpx;
        background-color: #bcb8b8;
        border-radius: 10rpx;
        height: 30rpx;
        line-height: 30rpx;
        padding: 0 8rpx;
        &.active {
          background-color: #5a2202;
        }
      }
    }
    &-content {
      margin-top: 25rpx;
      height: 485rpx;
      overflow: scroll;
    }
  }
}
</style>
